<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <title>进度条</title>
</head>
<body>
    <div class="container">
        <!-- 基础进度条 -->
        <!-- 进度条使用.progress包裹 ，默认颜色是蓝色 -->
        <div class="progress mt-5">
            <!-- .progress-bar是进度条内带颜色的部分，使用css来控制这个div的宽度，宽度就是进度条的进度 -->
            <div class="progress-bar" style="width: 80%;"></div>
        </div>
        <!-- 通过bg-来控制进度条的背景和进度填充的颜色 -->
        <!-- 进度条的高度也是同css调整div的高度来实现 -->
        <div class="progress bg-secondary mt-5" style="height: 30px;">
            <div class="progress-bar bg-success" style="width: 80%;">80%</div>
        </div>

        <div class="progress mt-5">
            <!-- .progress-bar-striped条纹进度条 -->
            <div class="progress-bar progress-bar-striped" style="width: 60%;"></div>
        </div>

        <div class="progress mt-5">
            <!-- .progress-bar-animated带动画的条纹进度条 -->
            <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 60%;"></div>
        </div>
        <!-- 多个进度条 -->
        <div class="progress mt-5">
            <!-- role="progressbar" 告诉搜索引擎这是一个进度条 -->
            <div class="progress-bar bg-danger" role="progressbar"  style="width: 15%;"></div>
            <div class="progress-bar bg-info" style="width: 20%;"></div>
            <div class="progress-bar bg-warning" style="width: 40%;"></div>
        </div>
    </div>
    
</body>
</html>